<template>
    <div class="app-container">
        <levelbar></levelbar>
          <div class="table-title">
            <el-form :model="classIdInfofamily" slot="form" label-width="80px">
                <div class="title margin-row margin-text">基础信息</div>
                <el-row :gutter="20" class="margin-row">
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>班级名称:</span>{{classIdInfofamily.className}}<el-button type="text" class="btn-success mr-left" @click="modify">修改</el-button>
                        </div>
                    </el-col>
                    <el-col :span="12" v-if="schoolType==0">
                        <div class="title-describe" v-cloak> <span>年级:</span>{{classIdInfofamily.gradeName}}</div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" type="flex" justify="space-around" class="margin-row">
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>班级码:</span>{{classIdInfofamily.classCode}}</div>
                    </el-col>
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>班级编号:</span>{{!classIdInfofamily.classNum ? '--' : classIdInfofamily.classNum}}</div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" type="flex" justify="space-around" class="margin-row">
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>学生数量:</span>{{classIdInfofamily.studentNumber}}</div>
                    </el-col>
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>班主任:</span>{{!classIdInfofamily.ownerName ? '--' : classIdInfofamily.ownerName}}<el-button type="text" class="btn-success mr-left" @click="btnHeadmaster">修改</el-button>
                        </div>
                    </el-col>
                </el-row>
                <div class="pad-btm"></div>
                <div class="title margin-row margin-text">创建信息</div>
                <el-row :gutter="20" type="flex" justify="space-around" class="margin-row">
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>创建人:</span>{{!classIdInfofamily.creatorName ? '--' : classIdInfofamily.creatorName}}</div>
                    </el-col>
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>创建时间:</span>{{!classIdInfofamily.createTime ? '--' : classIdInfofamily.createTime}}</div>
                    </el-col>
                </el-row>
                <div class="pad-btm"></div>
                <!-- 群管理添加  author shwj 20180402 -->
                <div class="title margin-row margin-text">群聊管理</div>
                <el-row :gutter="20" type="flex" class="margin-row">
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span class="notice-header">群公告:</span>
                        <div class="group-notice"><pre class="notice-text" v-text="groupNotice.notice||'暂无公告'"></pre><el-button type="text" class="btn-success btn-block" @click="modifyGroupNotice">修改</el-button></div>
                        <!-- <div class="group-notice"><p class="notice-text" v-text="groupNotice.notice||'暂无公告'"></p><el-button type="text" class="btn-success btn-block" @click="modifyGroupNotice">修改</el-button></div> -->
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" type="flex" class="margin-row">
                  <el-col :span="12">
                        <div class="title-describe" v-cloak>
                          <span>群头像:</span>
                          <div class="upload-pic-avator">
                            <div class="upload-pic-avator-img" v-if="groupAvator.avatorUrl"><img :src="groupAvator.avatorUrl"/></div>
                          </div>
                          <el-button type="text" class="btn-success mr-left ver-bt" @click.stop="modifyGroupAvator">修改</el-button>
                          </div>
                    </el-col>
                </el-row>
                <!-- 群管理添加 end -->
                <div class="pad-btm"></div>
                <el-row :gutter="20" type="flex" justify="space-around" class="margin-row">
                  <el-button @click="go">返回</el-button>
                </el-row>
            </el-form>
          </div>
        
        <!-- 修改班级名称 -->
        <modifyClassName @classNewName="classNewName" v-if="modifyTeacher.dialogFormVisible" :modifyTeacher="modifyTeacher"></modifyClassName>

        <!-- 班主任详情 -->
        <headmasterData @teacherName="teacherName" v-if="leadershipTeacher.dialogFormVisible" :leadershipTeacher="leadershipTeacher"></headmasterData>

        <!-- 群公告详情 -->
        <groupBulletin :group-notice="groupNotice" v-if="groupNotice.dialogGroup" :school-id="schoolId" :p-id="groupNotice.pId" @setNotice="setNotice"></groupBulletin>

        <!-- 上传头像弹窗 -->
        <avatorUpload v-if="groupAvator.dialogAvatorUpload" @getImgData="getImgData" :school-id="schoolId" :p-id="groupAvator.pId" :groupAvator="groupAvator" :history-img="groupAvator.sHistoryImgUrl"></avatorUpload>
    </div>
</template>
<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import modifyClassName from './comps/modifyClassName';
import headmasterData from './comps/headmasterData';
import groupBulletin from './comps/groupBulletin';
import avatorUpload from './comps/avatorUpload';
import { mapState, mapActions, mapGetters } from 'vuex';
import {
  getClassInfo,
  getGroupChatInfo
} from 'api/classAll';

export default {
    name: 'classDetails',
    components: { Levelbar, TableLayout, modifyClassName, headmasterData, groupBulletin, avatorUpload},
    created() {
        this.getstudentList();
        this._getGroupChatInfo(); // 请求群管理数据
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.getstudentList();
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters(['uid', 'schoolType'])
    },
    data() {
        return {
      // 班级信息集合
            loading: true,
            classIdInfofamily: {},
      // 修改班主任名称-子组件
            modifyTeacher: {
                dialogFormVisible: false
            },
      // 班主任详情-子组件
            leadershipTeacher: {
                dialogFormVisible: false,
                id: '',
                classId: '',
                ownerName: ''
            },
      // 群管理
            groupNotice: {
                dialogGroup: false,
                notice: '',
                pId: ''
            },
      // 群头像
            groupAvator: {
                dialogAvatorUpload: false, // 上传头像弹窗显示
                avatorUrl: require('../../assets/avator-default.png'),
                sHistoryImgUrl: [],
                pId: ''
            },
            schoolId: ''
        };
    },
    methods: {
    // 全局获取行数
        ...mapActions(['ChangePageSize']),
        getstudentList() {
            getClassInfo(this.$route.params.classId).then(response => {
                this.classIdInfofamily = response.data.content;
                this.schoolId = response.data.content.schoolId;
            })
        },
        _getGroupChatInfo() { // 获取群公告信息
            getGroupChatInfo(this.$route.params.classId).then(res => {
                if (res.data.content) {
                    this.groupNotice.notice = res.data.content.sNotice;
                    this.groupAvator.avatorUrl = res.data.content.sImgUrl || require('../../assets/avator-default.png');
                    this.groupNotice.pId = res.data.content.pId && res.data.content.pId;
                    this.groupAvator.pId = res.data.content.pId && res.data.content.pId;
                    this.groupAvator.sHistoryImgUrl = res.data.content.sHistoryImgUrl&&res.data.content.sHistoryImgUrl.split(';');
                }
            })
        },
        modify(val) {
            this.modifyTeacher.dialogFormVisible = true;
            this.modifyTeacher.id = this.classIdInfofamily.classId;
            if(this.classIdInfofamily.className){
                this.modifyTeacher.className = this.classIdInfofamily.className;
            }
            
        },
        // 点击班级名称 的修改成功后
        classNewName(val) {
            if (!val) {
              // 
            } else {
        // 发现传递过来数据，刷新父组件的数据
                this.getstudentList();
                this.$store.dispatch('UpdateCache', true);
                // this.$router.push({path: '/classStudent/classStudent'});
            }
        },
        btnHeadmaster(val) {
            this.leadershipTeacher.ownerName = this.classIdInfofamily.ownerName;
            this.leadershipTeacher.dialogFormVisible = true;
            this.leadershipTeacher.id = this.classIdInfofamily.schoolId;
            this.leadershipTeacher.classId = this.classIdInfofamily.classId;
        },
        // 点击班主任 修改成功后
        teacherName(val) {
            if (!val) {
              // 
            } else {
        // 发现传递过来数据，刷新父组件的数据
                this.getstudentList();
                this.$store.dispatch('UpdateCache',true);
                // this.$store.dispatch('UpdateCache', true);//scyy 去掉了改行
            }
        },
        modifyGroupNotice() {
            this.groupNotice.dialogGroup = true;
        },
        modifyGroupAvator() {
            this.groupAvator.dialogAvatorUpload = true;
        },
        getImgData(data) { // 获取头像信息
            if (data) {
                this._getGroupChatInfo();
            }
        },
        // 公告修改成功后
        setNotice(text) {
            // this._getGroupChatInfo();
            this._getGroupChatInfo();
            this.groupNotice.notice = text;
        },
        go(){
            this.$store.dispatch('UpdateCache', true);//scyy 添加改行
            this.$router.go(-1);
        }
    }
};
</script>
<style lang="scss" scoped>
.margin-button{
  margin-bottom: 15px;
}

.table-title{
  padding: 20.5px 0;
  background: #fff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.margin-row{
  padding: 0 20px;
  margin-bottom: 15px;
}
.margin-text{
 padding-left: 40px 
}
.border-center{
  height: 1px;
  background: #dddddd;
  margin: 30px 0 15px;
}
.pad-btm{
    padding-bottom: 50px;
}
.title-describe{
  font-size: 14px;
  span{
    margin-right: 30px;
    color: #999999;
    margin-left: 18px;
    width: 60px;
    text-align: right;
    display: inline-block
  }
  .notice-header {
    float: left;
    display: block;
  }
  .group-notice{
    padding-left: 108px;
    .notice-text{
      display: inline-block;
    }
    .btn-block{
      display: block;
    }
  }
  .upload-pic-avator{
    width: 90px;
    height: 90px;
    display: inline-block;
    vertical-align: top;
    background: #f7f7f9;
    .upload-pic-avator-img {
      width: 90px;
      height: 90px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .ver-bt {
    vertical-align: bottom;
  }
}
.mr-left{
    margin-left: 20px;
}
.title{
  position: relative;
  margin-bottom: 30px;
  font-size: 14px;
  &::after{
    content:'';
    position: absolute;
    left: 20px;
    top: 2px;
    width: 4px;
    height: 14px;
    background: #ff5e2c;
  }
}
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  .app-levelbar {
    height: 35px;
  }
  .el-form {
    background: #fff;
    // padding-bottom: 50px;
  }
}
</style>
